<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="订单详情"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="1000px"
    >
        <div class="order-detail">
            <div class="info">
                <el-divider content-position="left">收货信息</el-divider>
                <el-row>
                    <el-col :span="24">收货人：{{ orderDetail.consignee }} {{ orderDetail.consigneeMobile }}
                        {{ orderDetail.regionDetailName }}{{ orderDetail.addressDetail }}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">物流信息：<span style="color:#900;">
                        {{ orderDetail.expressName }} {{ orderDetail.expressNo }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">快递费：<span style="color:#900;">
                        {{ orderDetail.expressMoney }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">用户备注：<span style="color:#900;">{{ orderDetail.remark }}</span></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">客服备注：<span style="color:#900;">{{ orderDetail.serviceRemark }}</span></el-col>
                </el-row>
            </div>

            <el-divider content-position="left">商品信息</el-divider>
            <el-table
                style="width: 100%; margin-bottom:20px;"
                :data="orderDetail.goodsList"
                border
                show-summary
                :summary-method="getSummaries"
                stripe
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称"/>
                <el-table-column prop="specKey" label="规格"/>
                <el-table-column prop="goodsPrice" label="单价"/>
                <el-table-column prop="goodsNum" label="数量"/>
                <el-table-column prop="totalMoney" label="金额"/>
            </el-table>

            <div class="info">
                <el-divider content-position="left">用户信息</el-divider>
                <el-row>
                    <el-col :span="8">用户名：{{orderDetail.userInfo? orderDetail.userInfo.username:'' }}</el-col>
                    <el-col :span="8">昵称：{{ orderDetail.userInfo? orderDetail.userInfo.nickname:'' }}</el-col>
                    <el-col :span="8">手机号：{{ orderDetail.userInfo? orderDetail.userInfo.mobile:'' }}</el-col>
                </el-row>

                <el-divider content-position="left">认证信息</el-divider>
                <el-row>
                    <el-col :span="8">公司名称：{{ orderDetail.sellerInfo.companyName }}</el-col>
                    <el-col :span="8">公司税号：{{ orderDetail.sellerInfo.companyCode }}</el-col>
                    <el-col :span="8">联系人：
                        <span v-if="orderDetail.sellerInfo.contactName">
                          {{ orderDetail.sellerInfo.contactName }}({{ orderDetail.sellerInfo.contactMobile }})
                        </span>
                    </el-col>
                </el-row>

                <el-divider content-position="left">支付信息</el-divider>
                <el-row>
                    <el-col :span="8">支付方式：{{ orderDetail.payTypeName }}</el-col>
                    <el-col :span="8">交易号：{{ orderDetail.transactionId }}</el-col>
                    <el-col :span="8">支付时间：{{ orderDetail.payTime }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">支付备注：{{ orderDetail.payRemark }}</el-col>
                </el-row>

                <el-divider content-position="left">订单信息</el-divider>
                <el-row>
                    <el-col :span="24">订单编号：{{ orderDetail.orderNo }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">下单时间：{{ orderDetail.createTime }}</el-col>
                    <el-col :span="8">发货时间：{{ orderDetail.shipmentsTime }}</el-col>
                    <el-col :span="8">完成时间：{{ orderDetail.completeTime }}</el-col>
                </el-row>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {OrderApi} from '@/api/mall/order'

export default {
    name: 'MallOrderDetail',
    components: {},
    data() {
        return {
            orderDetail: {
                userInfo: {},
                sellerInfo: {}
            },
            dialogVisible: false
        }
    },
    methods: {
        // 显示组件
        showUpdate(orderNo) {
            this.dialogVisible = true

            OrderApi.getOrderDetailByOrderNo(orderNo).then((response) => {
                let goodsTotalMoney = 0;
                response.goodsList.forEach(item => {
                    item.goodsPrice = item.goodsPrice / 100
                    item.totalMoney = item.totalMoney / 100
                    goodsTotalMoney+=item.totalMoney
                })

                response.goodsTotalMoney = goodsTotalMoney
                response.expressMoney = response.expressMoney / 100
                response.totalMoney = response.totalMoney / 100
                response.sellerInfo = response.sellerInfo == null ? {} : response.sellerInfo

                this.orderDetail = response
            })
        },
        getSummaries() {
            return ['总计:', '', '', '', this.orderDetail.totalGoodsNum, this.orderDetail.goodsTotalMoney]
        }
    }
}
</script>

<style>
.order-detail .info {
    line-height: 30px;
    margin-bottom: 20px;
}

.el-divider--horizontal {
    margin: 36px 0 24px 0;
}

</style>
